<template>
    <!-- 查询区 -->
    <div class="search">
        <el-form :inline="true" :model="ad" ref="searchfromat">

            <el-form-item label="分类名" prop="name">
                <el-input placeholder="请输入分类名" v-model="ad.name" />
            </el-form-item>
            <el-form-item label="详情描述" prop="description">
                <el-input placeholder="请输入详情描述" v-model="ad.description" />
            </el-form-item>

            <el-button type="primary" :icon="Search" @click="searchT" style="margin-bottom: 20px;">查询</el-button>
            <el-button type="primary" :icon="Refresh" @click="restform" style="margin-bottom: 20px;">重置</el-button>
        </el-form>
    </div>
    <div class="xinzeng" style="position: relative;margin-left: 760px ;margin-top: -52px; ">
        <el-button type="success" :icon="CirclePlus" @click="addnew"> 新增一级分类</el-button>
    </div>


    <!-- 表格 -->
    <div class="table" style="margin-top: 5px;">
        <el-table :data="tableData" border style="width: 100%" :header-cell-style="headerCellStyle" align="center"
            ref="table" row-key="id">
            <el-table-column prop="id" label="ID" width="140" align="center" />
            <el-table-column prop="name" label="分类名" width="170" align="center" />
            <el-table-column prop="parentId" label="父类别编号" width="100" align="center" />
            <el-table-column prop="description" label="详情描述" align="center" />


            <el-table-column fixed="right" label="操作" width="300" align="center">
                <!-- 点击时获取这行的数据  -->
                <template v-slot="scope">
                    <el-button type="success" size="small" @click="addb(scope.row)">
                        <el-icon>
                            <Edit />
                        </el-icon>
                        新增下级分类
                    </el-button>
                    <el-button type="primary" size="small" @click="edit(scope.row)">
                        <el-icon>
                            <Edit />
                        </el-icon>
                        编辑
                    </el-button>
                    <el-button type="danger" size="small" @click="delbyid(scope.row)">
                        <el-icon>
                            <Delete />
                        </el-icon>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>


    </div>

    <!-- 一级新增表单 -->
    <el-dialog v-model="show" :title="title" width="500" draggable :close-on-click-modal="false" @close="close"
        style="margin-bottom: 5px;text-align: center;">
        <el-form :model="aeform" ref="sfRef">
            <el-row>
                <el-col>
                    <el-form-item label="父分类名：" label-width="100" prop="parentname">
                        <el-input disabled v-model="aeform.parentname" placeholder="无上级分类" />
                    </el-form-item>
                    <el-form-item label="分类名：" label-width="100" prop="name">
                        <el-input v-model="aeform.name" placeholder="请输入分类名" />
                    </el-form-item>

                    <el-form-item label="商品描述：" label-width="100" prop="description">
                        <el-input v-model="aeform.description" placeholder="请输入商品描述" />
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="show = false">取消</el-button>
                <el-button type="primary" @click="submitForm">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>


<script setup>
import { getall, deleteid, addall, updateal, get, getname } from '../api/fenlei';
import { ref, onMounted, nextTick } from 'vue';
import { Delete, Edit, Refresh, Search, CirclePlus, Key } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
let tableData = ref();
onMounted(() => {
    search();
});
//查询
async function search() {
    let resp = await getall();
    tableData.value = resp.data.children;
    //console.log(resp.data);
}
let ad = ref({

    name: "",
    description: "",
});
async function searchT() {
    // if(ad.value.description===null||ad.value.description===''&& ad.value.name===null||ad.value.name){
    //     search();
    // }else{
    // console.log(ad.value.description);
    //console.log(ad.value.name);
    let resp = await get(ad.value.name, ad.value.description);
    if (resp.success) {
        tableData.value = resp.data.children;
    } else {
        ElMessage({
            message: "输入正确的值",
            type: "warning"
        });
    }
    //console.log(resp);


}
//重置
let searchfromat;
function restform() {
    searchfromat.resetFields();
}





let aeform = ref({
    parentname: "",
    name: "",
    description: "",
    parentId: ""
});

//修改  可以获取到 name description id,parentid
function edit(row) {
    show.value = true;
    title.value = "修改分类";
    //浅克隆
    row = Object.assign({}, row);

    nextTick(async () => {
        aeform.value = row;
        // console.log(row);  获取父类名//////////////////////////////////////
        if (row.parentId != null) {
            let resp = await getname(row.parentId);

            //console.log(resp.name);
            aeform.value.parentname = resp.name;
            // console.log(aeform)
        }
    });
}
//一级新增  获取name description
let show = ref(false);
let title = ref("新增分类");
function addnew() {
    aeform.value.parentId="";
    show.value = true;
    title.value = "新增一级分类";

}
//新增下级分类  需要parentid，name,description
function addb(row) {
    show.value = true;
    title.value = "新增分类";
    //浅克隆
    row = Object.assign({}, row);

    nextTick(() => {
        aeform.value.parentname = row.name;
        aeform.value.parentId = row.id;
    });
}
async function submitForm() {
    if (aeform.value.id) {
       let resp =await updateal(aeform.value);
       if (resp.success) {
        ElMessage({
            message: '操作已成功',
            type: 'success',
        });
        search();
        show.value = false;
    } else {
        ElMessage({
            message: '操作失败，请联系管理员',
            type: 'error',
        });
        //show.value=false;
    }
    } else {
       let resp= await addall(aeform.value);
       if (resp.success) {
        ElMessage({
            message: '操作已成功',
            type: 'success',
        });
        search();
        show.value = false;
    } else {
        ElMessage({
            message: '操作失败，请联系管理员',
            type: 'error',
        });
        //show.value=false;
    }
    //    if(aeform.value.parentId){
    //     //新增下级
    //     console.log("新增下级");
    //    }else{
    //     //新增父级
    //     console.log("新增父级");
    //    }
    }
}



//删除
function delbyid(row) {
    ElMessageBox.confirm(
        "您确定要删除吗？",
        "确认", {
        type: 'warning',
    }
    ).then(async () => {
    //浅克隆
    row = Object.assign({}, row);
    if(row.children!=null){
        ElMessage({
            message: '下面还有商品分类，不能删除',
            type: 'error',
        });
    }else{
       
        let resp =await deleteid(row.id);

        if(resp.success){
            ElMessage({
            message: '操作已成功',
            type: 'success',
        });
        search();
        }else{
            ElMessage({
            message: '有关联的商品，不能删除',
            type: 'error',
        });
        }
    }})

}








let sfRef;//新增和修改表单的实例引用
//关闭对话框时触发此事件
function close() {
    sfRef.resetFields();//重置表单
}


//表头颜色
function headerCellStyle() {
    return {
        backgroundColor: "#B3CAD8",
        textAlign: "center",
        color: "#fff"
    }
}
</script>
<style scoped></style>
